
            
        
            
            $.ajax({
                url:'../data/goods.json',
            })
            .then((res)=>{
                // 得到所有商品数据
                var data = res;
                
                var str=location.href; //取得整个地址栏
                var num=str.indexOf("?") 
                str=str.substr(num+1); //取得所有参数   stringvar.substr(start [, length ]
                var arr=str.split("&"); //各个参数放到数组里
                // 获取到id
                number = arr[0].split('=')
                let id = number[1]-0
                // 获取到此id的相应数据
                let datanav = data[id-1]
                
                // 渲染内容导航栏
                let list = document.querySelector('.detailnav')
                list.innerHTML =
                    `
                        <div>
                            <a href="../index.html">首页</a>
                            <span>&nbsp;>&nbsp;</span>
                            <a href="">${datanav.category}</a>
                            <span>&nbsp;>&nbsp;</span>
                            <a href="">${datanav.title}</a>
                        </div>
                    `
    
                // 获取此商品的标题、价格等
                let detailtitle = document.querySelector('.detailtitle')
                let detailexlain = document.querySelector('.detailexlain')
                let detailnew = document.querySelector('.detailnew')
                let detailold = document.querySelector('.detailold')
                detailtitle.innerHTML = `${datanav.title}`
                detailexlain.innerHTML = `${datanav.title}`
                detailnew.innerHTML = `${datanav.current_price}`
                detailold.innerHTML = `${datanav.price}`

                // 获取此商品的商品图
                let detailurl= datanav.img_big_logo
                $('.detailimg').attr('src',detailurl)  
                
                // 获取此商品的商品详情
                let goodsdetail = document.querySelector('.goodsdetail')
                goodsdetail.innerHTML = `${datanav.goods_introduce}`


                // 点击加减按钮来改变商品数量框里的数量
                let plus = document.querySelector('.plus')
                let reduce = document.querySelector('.reduce')
                // 增加
                plus.onclick = function(){
                    let quantity1 = document.querySelector('.quantity1')
                    let qua = (quantity1.value-0)+1
                    $('.quantity1').attr('value',qua)
                }
                // 减少
                reduce.onclick = function(){
                    let quantity1 = document.querySelector('.quantity1')
                    let qua = (quantity1.value-0)-1
                    $('.quantity1').attr('value',qua)
                    if(qua<=1){
                        $('.quantity1').attr('value',1)
                    }
                }

                // 点击加入购物车来将商品数据加入到localstorage中
                let join = document.querySelector('.join')
                join.onclick = function(){
                    alert('收藏成功')
                    // 先判断是否是登录状态，是就能添加商品，不是则不能添加商品
                    let user = document.querySelector('.headeruser').innerHTML
                    let localuser = JSON.parse(localStorage.getItem('DELL'))
                    let res = localuser.some(item=>{return '欢迎'+item.user == user})
                    
                    if(res){
                        // alert('添加成功')
                        let goods_quan =datanav
                        // console.log(goods_quan)
                        let list = JSON.parse(sessionStorage.getItem('goods')) || []
                        if(!list.length){
                            list.push(goods_quan)
                            goods_quan.cart_number = 1
                        }else{
                            let res = list.some(item=>{return item.goods_id == goods_quan.goods_id})
                            if(res){
                                // 如果里面有这个商品，在原本的数量上再加上input里面的商品数量
                                let index = list.findIndex(item=>{return item.goods_id == goods_quan.goods_id})
                                let quantity1 = document.querySelector('.quantity1').value-0
                                // 加上input里面的数量
                                list[index].cart_number += quantity1
                            }else{
                                // 如果里面没有这个商品，加入进去，并且数量为最初加进去的input的商品数量
                                let quantity1 = document.querySelector('.quantity1').value-0
                                list.push(goods_quan)
                                goods_quan.cart_number = quantity1
                            }
                        }
                        sessionStorage.setItem('goods', JSON.stringify(list))
                    }else{
                        alert("您还未登陆！")
                    }
                       
                }

               

            })




            // 放大镜
        var smallBox = document.querySelector('.smallBox');
        var smallpic = document.querySelector('.smallBox>img');
        var mask = document.querySelector('.boxNone');
        var bigBox = document.querySelector('.bigBox');
        var pic = document.querySelector('.bigBox>img');
        var pics = document.querySelectorAll('.pic');

        
            smallBox.onmouseover = function(){
                bigBox.style.display = 'block';
                mask.style.display = 'block';
            }
            smallBox.onmouseout = function(){
                bigBox.style.display = 'none';
                mask.style.display = 'none';
            }
            smallBox.onmousemove = function(e){
                e = e || window.event;
                let x = e.pageX - smallBox.offsetParent.offsetLeft - mask.offsetWidth/2;
                let y = e.pageY - smallBox.offsetParent.offsetTop - mask.offsetHeight/2;

                if(x<=0){
                    x = 0;
                }else if(x>=smallBox.offsetWidth - mask.offsetWidth){
                    x = smallBox.offsetWidth - mask.offsetWidth;
                }
                if(y<=0){
                    y = 0;
                }else if(y>=smallBox.offsetHeight - mask.offsetHeight){
                    y = smallBox.offsetHeight - mask.offsetHeight;
                }

                mask.style.left = x + 'px';
                mask.style.top = y + 'px';

                let w = x / (smallBox.offsetWidth - mask.offsetWidth);
                let h = y / (smallBox.offsetHeight - mask.offsetHeight);
                
                pic.style.left = -w * (pic.offsetWidth - bigBox.offsetWidth) + 'px';
                pic.style.top = -h * (pic.offsetHeight - bigBox.offsetHeight) + 'px';
            
            }





            // 固定浮窗显示隐藏返回顶部
        $(document).scroll(function(){
            let fixed = document.querySelector('.fixed')
            let li = document.querySelector('#screeny')
            let pageY = pageYOffset
            if(pageY<700){
                // li.style.display = 'none';
                // fixed.style.height = 236 + 'px';
                $(li).css('display', 'none')
                $(fixed).css('height', 236 + 'px')
            }else{
                $(li).css('display', 'block')
                $(fixed).css('height', 292 + 'px')
            }
          });
            